{% extends "base.html" %}

{% block head %}
<title>index page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  #allmap {
    width: 800px;
    height: 600px;
    overflow: hidden;
    margin: 0;
    font-family: "微软雅黑";
  }
</style>
<script type="text/javascript"
  src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=blQBF83Q9DcTiqCAGGsPfy2T8hCXiRBP"></script>
{% endblock %}

{% block navbar %}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand">RateMap</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="{{url_for('index')}}">主页</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="{{url_for('surround')}}">周边推荐</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{url_for('user_analysis')}}">用户分析</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{url_for('shop_analysis')}}">店铺分析</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{url_for('area_analysis')}}">区域分析</a>
      </li>
    </ul>
  </div>
</nav>
{% endblock %}

{% block content %}
<div id="allmap"></div>
<form style="padding: 8px;" action="{{url_for('surround_search')}}" method="post">
  <div class="form-group">
    <label for="formGroupExampleInput">评分</label>
    <input type="text" class="form-control" id="rating" placeholder="4.0" value="4.0" name="arg_rating">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput">Latitude</label>
    <input type="text" class="form-control" id="latitude" placeholder="40" name="arg_latitude">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Longitude</label>
    <input type="text" class="form-control" id="longitude" placeholder="-80" name="arg_longitude">
  </div>
  <div class="form-group form-check">
    <input class="form-check-input" type="checkbox" id="withChildren" name="arg_with_children">
    <label class="form-check-label" for="withChildren">
      带孩子
    </label>
  </div>
  <div class="form-group">
    <label for="transportaion">交通工具</label>
    <select id="transportaion" class="form-control" name="arg_transportaion">
      <option value="car" selected>car</option>
      <option value="bike">bike</option>
    </select>
  </div>
  <button type="submit" id="submit_btn" class="btn btn-primary">查询</button>
</form>
<script type="text/javascript">
  // GL版命名空间为BMapGL
  // 按住鼠标右键，修改倾斜角和角度
  var map = new BMapGL.Map("allmap");    // 创建Map实例
  map.centerAndZoom(new BMapGL.Point(-80, 40), 10);  // 初始化地图,设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
  map.addEventListener('click', function (e) {
    document.getElementById("latitude").value = e.latlng.lat;
    document.getElementById("longitude").value = e.latlng.lng;
    var allOverlay = map.getOverlays();
    for (var i = 0; i < allOverlay.length; i++) {
      map.removeOverlay(allOverlay[i]);
    }
    var point = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
    var marker = new BMapGL.Marker(point);        // 创建标注   
    map.addOverlay(marker);
  });
</script>

{% endblock %}